/*!
 * MaterialUI by ShuangYa
 * Copyright 2014 ShuangYa
 * Licensed under http://git.oschina.net/sy/MaterialUI/blob/master/LICENSE
 */
; (function($) {
	"use strict";
	var fix = 360,
	ui = {
		"baseinfo": {
			"page": {
				"height": $('body').offset().height,
				"width": $('body').offset().width - fix
			}
		},
		"pull": {
			"top": 0,
			"startX": 0,
			"startY": 0,
			"lastX": -1,
			"lastY": -1
		},
		"floatBtn": {
			"binded": false,
			"lastY": 0,
			"hideMe": []
		}
	};
	
	//触摸相关函数，提取自zepto
	function isPrimaryTouch(event) {
		return (event.pointerType == 'touch' || event.pointerType == event.MSPOINTER_TYPE_TOUCH) && event.isPrimary;
	}
	function isPointerEventType(e, type) {
		return (e.type == 'pointer' + type || e.type.toLowerCase() == 'mspointer' + type);
	}
	
	//部分内部函数
	function hideMenu () {
		/*var menu = $('#' + id),
		hideMenu = function() {
			var thewidth = '-' + menu.width().toString() + 'px';
			menu.css({
				left: thewidth
			});
			menu.trigger('hideMenu');
			$('#bg').unbind('tap');
			$('#bg').hide();
			menu = null;
		};*/
	}
	/*
	 * 唤出菜单
	 * @param menu 菜单ID
	*/
	function showMenu (id) {
		var menu = $('#' + id);
		menu.css({
			left: 0
		});
		$('#bg').show();
		//$('#bg').attr('data-')
		$('#bg').bind('tap', hideMenu);
	}
	/*
	 * 初始化
	 * 标题栏宽度自适应
	 * 返回按钮事件绑定
	 * 菜单按钮事件绑定
	 * 菜单样式自适应
	 * 菜单选项事件绑定
	 * 修正页面外的元素相关属性
	 * 自动隐藏浮动按钮
	*/
	/*
	 * 以下部分将写入CSS
	 * 菜单 .menu { left }
	*/
	//标题栏宽度自适应
	$('.TitleBar').each(function(i, n) {
		var hasWidth = 0,
		allWidth = $(n).offset().width;
		$(n).children().each(function(ic, nc) {
			if (!$(nc).hasClass('title')) hasWidth += $(nc).offset().width;
		});
		$(n).find('.title').css({
			"max-width": (allWidth - hasWidth - 40 - fix).toString() + 'px'
		});
		n = null;
	});
	//返回按钮事件绑定
	$('.btn-back').bind('tap',
	function() {
		var to = $(this).attr('data-to');
		if (to === 'url') {
			window.location.href = $(this).attr('data-url');
			return;
		}
		if (to === 'page') {
			$.goPage($(this).attr('data-page'));
			return;
		}
		if (to === 'history') {
			history.go( - 1);
			return;
		}
		to = null;
	});
	//菜单按钮事件绑定
	$('.btn-menu').bind('tap',
	function() {
		var menu = $(this).attr('data-menu');
		showMenu(menu);
	});
	//菜单样式自适应
	$('.menu').each(function(i, n) {
		var menu = $(n),
		thewidth = '-' + menu.width().toString() + 'px';
		menu.css({
			left: thewidth
		});
		n = null;
		menu = null;
	});
	$('.menu').find('.item').find('.more').addClass('fa-rotate-90');
	$('.menu').find('.active').find('.more').removeClass('fa-rotate-90');
	//菜单选项事件绑定
	$('.menu').find('.item a').bind('tap',
	function() {
		var item = $(this).parents('.item'),
		fa = $(this).find('.more');
		if (item.attr('data-toggle') === 'dropdown') { //展开列表
			item.toggleClass('active');
			fa.toggleClass('fa-rotate-90');
		}
		item = null;
		fa = null;
	});
	//修正页面外的元素的相关属性
	(function($, foo) {
		var s = document.createElement('style');
		$(s).attr('type', 'text/css');
		$(s).html('#wrapper .page{left:' + foo.baseinfo.page.width + 'px;}#wrapper .page.in-back{left:-' + foo.baseinfo.page.width + 'px;}');
		$('head').append(s);
		var t = setTimeout(function() {
			$.goPage($('.page-show').attr('id').replace(/^page/gi, ''));
		},
		500);
		t = null;
		s = null;
	})($, ui);
	//自动隐藏浮动按钮
	$('.float-btns').each(function(i, n) {
		if ($(n).attr('data-autohide') === 'true') {
			ui.floatBtn.hideMe.push(n);
			if (! (ui.floatBtn.binded)) { //事件绑定
				$(document).bind('touchmove MSPointerMove pointermove',
				function(e) {
					var _isPointerType = isPointerEventType(e, 'move');
					if (_isPointerType && !isPrimaryTouch(e)) return;
					var firstTouch = _isPointerType ? e: e.touches[0],
					changeY = Math.abs(ui.floatBtn.lastY - firstTouch.pageY);
					if (changeY <= 5) {
						firestTouch = null;
						e = null;
						return;
					} else {
						if (ui.floatBtn.lastY > firstTouch.pageY) {
							$(ui.floatBtn.hideMe).addClass('out');
						} else {
							$(ui.floatBtn.hideMe).removeClass('out');
						}
						ui.floatBtn.lastY = firstTouch.pageY;
					}
				});
			}
		}
	});
	/*
	 * 组件
	 * 开关
	 * @param action 操作，可选：on,off,enable,disable。当不是以上三个时，则视为样式，可选：default,success
	 * switcher事件可绑定于checkbox
	 * @this-data ui-initswitcher,ui-switcher
	*/
	$.fn.switcher = function(action) {
		var element;
		if (typeof(this) === 'undefined' || this === null || this.length === 0) return;
		//打开开关
		if (action === 'on') {
			if ($(this).data('ui-initswitcher') !== 'done') throw new Error('Switcher not inited yet');
			element = $(this).data('ui-switcher');
			if ($(element).hasClass('disabled')) return; //禁用状态
			$(element).addClass('on');
			this.checked = true;
			$(this).trigger('switcher');
			return element;
		}
		//关闭开关
		if (action === 'off') {
			if ($(this).data('ui-initswitcher') !== 'done') throw new Error('Switcher not inited yet');
			element = $(this).data('ui-switcher');
			if ($(element).hasClass('disabled')) return; //禁用状态
			$(element).removeClass('on');
			this.checked = false;
			$(this).trigger('switcher');
			return element;
		}
		//禁用开关
		if (action === 'disable') {
			if ($(this).data('ui-initswitcher') !== 'done') throw new Error('Switcher not inited yet');
			element = $(this).data('ui-switcher');
			$(element).addClass('disabled');
			return element;
		}
		//启用开关
		if (action === 'enable') {
			if ($(this).data('ui-initswitcher') !== 'done') throw new Error('Switcher not inited yet');
			element = $(this).data('ui-switcher');
			$(element).removeClass('disabled');
			return element;
		}
		//建立开关
		if ($(this).data('ui-initswitcher') === 'done') return $(this).data('ui-switcher');
		element = document.createElement('div');
		if (this.checked) $(element).addClass('on');
		$(element).addClass('switcher');
		$(element).addClass('switcher-' + action);
		$(element).html('<span class="line"></span><span class="button">&nbsp;</span>');
		$(this).hide();
		$(this).before(element);
		$(this).data('ui-initswitcher', 'done');
		$(this).data('ui-switcher', element);
		$(element).data('ui-switcherbox', this);
		$(element).bind('tap',
		function() {
			if ($(this).hasClass('disabled')) return; //禁用状态
			$(this).toggleClass('on');
			if ($(this).hasClass('on')) {
				$(this).data('ui-switcherbox').checked = true;
			} else {
				$(this).data('ui-switcherbox').checked = false;
			}
			$($(this).data('ui-switcherbox')).trigger('switcher');
		});
		return element;
	}
	/*
	 * 组件
	 * more
	 * @param action 操作，可选：enable,disable,数组
	 * 数组格式：[{"content":"aaa","callback":function(){}},{"content":"bbb","callback":function(){}}]
	*/
	$.fn.more = function(action) {
		var element, addonele, harfWidth = (document.body.offsetWidth-fix) / 2;
		if (typeof(this) === 'undefined' || this === null || this.length === 0) return;
		//禁用
		if (action === 'disable') {
			if ($(this).data('ui-initmore') !== 'done') throw new Error('More not inited yet');
			$(this).addClass('disabled');
			return $(this).data('ui-more');
		}
		//启用
		if (action === 'enable') {
			if ($(this).data('ui-initmore') !== 'done') throw new Error('More not inited yet');
			$(this).removeClass('disabled');
			return $(this).data('ui-more');
		}
		//建立。不判断是否已经建立。如果已经建立，则重建
		element = document.createElement('ul');
		$(element).addClass('more');
		$(element).hide();
		$(this).data('ui-initmore', 'done');
		$(this).data('ui-more', element);
		$(action).each(function(i, n) {
			addonele = document.createElement('li');
			$(addonele).bind('tap',
			function() {
				$($(this).parents('.more')[0]).hide();
			});
			$(addonele).bind('tap', n.callback);
			$(addonele).html(n.content);
			$(element).append(addonele);
		});
		if ($(this).offset().left > harfWidth) { //在右半边，则向左半边展开
			$(element).css({
				top: $(this).offset().top + $(this).offset().height + 1,
				left: $(this).offset().left - 200 - fix
			});
		} else {
			$(element).css({
				top: $(this).offset().top + $(this).offset().height + 1,
				left: $(this).offset().left - $(this).offset().width - fix
			});
		}
		$('body').append(element);
		$(this).bind('tap',
		function() {
			if ($(this).hasClass('disabled')) return; //禁用状态
			$($(this).data('ui-more')).toggle();
		});
		return element;
	}
	/*
	 * 组件
	 * SnackBars，提示条
	 * @param object option 选项
	 * @param string option[text] 消息
	 * @param object option[button] 按钮，可为空
	 * @param string option[button][text] 按钮文字
	 * @param string option[button][style] 按钮样式
	 * @param function option[button][callback] 回调函数
	 * @param string option[style] 样式，可选：default,success,warning,danger
	 * @param int option[hide] 显示的时间，单位：毫秒
	*/
	$.SnackBar = function(option) {
		var ele = document.createElement('div'),
		html = '<span>' + option.text + '</span>',
		hideMe = function(){
			ele.removeClass('in');
			$('.float-btns').removeClass('up');
			ele = null;
		};
		//移除已经存在的SnackBar
		if ($('.snackbar').length > 0) {
			$('.snackbar').removeClass('in');
		}
		//基本样式
		$(ele).html(html);
		$(ele).addClass('snackbar');
		$(ele).addClass('snackbar-' + option.style);
		//如果有按钮
		if (typeof(option.button) === 'object') {
			var btn = document.createElement('span');
			$(btn).addClass('right').addClass('btn').addClass('btn-flat').addClass('btn-' + option.button.style);
			$(btn).html(option.button.text);
			$(btn).bind('tap', hideMe);
			$(btn).bind('tap', option.button.callback);
		}
		//绑定滑动事件TODO
		//适应float-btns
		$('.float-btns').addClass('up');
		//加入
		$('body').append(ele);
		$(ele).addClass('in');
		var t = setTimeout(hideMe, option.hide);
		t = null;
	}
	/*
	 * 组件
	 * 加载框
	 * @param object option 选项
	 * @param string option[icon] 图标，默认没有
	 * @param string option[text] 显示的文字
	 * @param boolean option[spin] 是否旋转图标，默认为否
	*/
	$.loadingBox = function(option) {
		var ele = document.createElement('div');
		$(ele).addClass('loadingBox').addClass('loadingBox-' + option.style);
		if (typeof(option.icon) !== 'undefined' && option.icon !== '' && option.icon !== null) { //是否有图标
			if (option.spin) $(ele).append('<div class="icon"><i class="fa fa-spin fa-' + option.icon + '"></i></div>');
			else $(ele).append('<div class="icon"><i class="fa fa-' + option.icon + '"></i></div>');
		}
		if (typeof(option.text) !== 'undefined' && option.text !== '' && option.text !== null) $(ele).append('<div class="text">' + option.text + '</div>');
		$('#bg').show();
		$('body').append(ele);
		return ele;
	}
	/*
	 * 组件
	 * 提示框
	 * @param object option 选项
	 * @param string option[title] 标题，可为空
	 * @param string option[content] 内容，可为HTML
	 * @param string option[button] 所有的按钮，为数组
	 * @param string option[button][style] 按钮样式
	 * @param string option[button][text] 按钮文字
	 * @param function option[button][callback] 按钮回调函数
	*/
	$.dialog = function(option) {
		var ele = document.createElement('div'),
		btn,
		addBtn,
		hidedialog = function() {
			$(this).parents('.dialog').hide();
			$('#bg').hide();
		};
		//提示框主体
		$(ele).addClass('dialog');
		if (typeof(option.title) !== 'undefined' && option.title !== '' && option.title !== null) { //是否有标题
			$(ele).append('<div class="dialog-title">' + option.title + '</div>');
		}
		$(ele).append('<div class="dialog-content">' + option.content + '</div>');
		//提示框按钮
		if (typeof(option.button) !== 'undefined' && option.button.length > 0) {
			btn = document.createElement('div');
			$(btn).addClass('dialog-btn');
			$.each(option.button,
			function(i, n) {
				addBtn = document.createElement('input');
				$(addBtn).addClass('btn').addClass('btn-flat').addClass('btn-flat-' + n.style);
				$(addBtn).attr('type', 'button');
				$(addBtn).attr('value', n.text);
				$(addBtn).bind('tap', hidedialog);
				if (typeof(n.callback) === 'function') {
					$(addBtn).bind('tap', n.callback);
				}
				$(btn).append(addBtn);
			});
			$(ele).append(btn);
			btn = null;
			addBtn = null;
		}
		$('#bg').show();
		$('body').append(ele);
		$(ele).css({
			"margin-top": '-' + ($(ele).offset().height / 2).toString() + 'px'
		});
		return ele;
	}
	/*
	 * 组件
	 * 底部动作条
	 * @param 
	*/
	/*
	 * 组件
	 * 跳页相关
	 * @param int pageid Page的数字ID
	 * @param string type 跳页类型，默认为go（前进）可选为back
	*/
	$.goPage = function(pageid, type) {
		if ($('#page' + pageid).length) {
			console.log('ui:Show page ' + pageid);
			var shown = $('.page-show'),
			to = $('#page' + pageid),
			t;
			if (typeof(type) === 'undefined' || type === null) type = 'go';
			if (shown.attr('id') === to.attr('id')) {
				to.show();
				to.css({
					"left": 0
				});
				return;
			}
			shown.removeClass('page-show');
			to.addClass('page-show');
			to.show();
			if (type === 'go') {
				to.css({
					"left": ui.baseinfo.page.width.toString() + 'px'
				});
				shown.animate({
					"left": '-' + ui.baseinfo.page.width.toString() + 'px'
				},
				300);
				to.animate({
					"left": 0
				},
				300);
			} else if (type === 'back') {
				to.css({
					"left": '-' + ui.baseinfo.page.width.toString() + 'px'
				});
				shown.animate({
					"left": ui.baseinfo.page.width.toString() + 'px'
				},
				300);
				to.animate({
					"left": 0
				},
				300);
			} else if (type === 'packin') {
				to.css({
					"left": 0
				});
				//shown.css({"left":"50%","top":"50%","margin-top":'-'+shown.offset().height/2.toString()+'px',"z-index":"50"});
				shown.animate({
					"width": 0,
					"height": 0
				},
				300);
			}
			t = setTimeout(function() {
				shown.hide();
				shown = null;
			},
			300);
			t = null;
			to = null;
		} else {
			throw new Error('Page ' + pageid + ' Not exists');
		}
	}
	/*
	 * 组件
	 * 下拉和上拉
	 * @param object option 选项
	 * @param string option[style] 样式，可选：default
	 * @param string option[text] 文本，可为空
	 * @param string option[loadingText] 加载中文本，可为空
	 * @param string option[icon] 图标，可为空，可选：spinner,refresh
	 * @param string option[callback] 回调函数
	 * @this-data ui-pull{$pullType},ui-pull{$pullType}Option
	*/
	$.fn.pull = function(option) {
		var pullEle, pullType;
		if ($.inArray(option.type, ['up', 'down']) < 0) throw new Error('Pull need param "type" and "type" must is "up" or "down"');
		pullType = option.type.replace(/^(\w)/,
		function(s) {
			return s.toUpperCase();
		});
		//文本
		if (typeof(option.text) === 'undefined' || option.text === null) {
			if (option.type == 'up') option.text = '上拉加载更多';
			else option.text = '下拉加载更多';
		}
		//加载中文本
		if (typeof(option.loadingText) === 'undefined' || option.loadingText === null) {
			option.loadingText = '加载中';
		}
		//样式
		if (typeof(option.style) === 'undefined' || option.style === '' || option.style === null) {
			option.style = 'default';
		}
		pullEle = document.createElement('div');
		$(pullEle).addClass('pull').addClass('pull-' + option.style);
		//是否有图标
		if ($.inArray(option.icon, ['spinner', 'refresh']) >= 0) $(pullEle).append('<i class="loading fa fa-' + option.icon + '"></i>');
		$(pullEle).append('<span class="pullText">' + option.text + '</span>');
		//绑定
		$(this).data('ui-pull' + pullType + 'Option', option);
		$(this).data('ui-pull' + pullType, pullEle);
		//将pull元素添加进去
		if (option.type == 'up') $(this).append(pullEle);
		else $(this).prepend(pullEle);
		//绑定拉动事件
		//touchstart
		$(this).bind('touchstart MSPointerDown pointerdown',
		function(e) {
			var _isPointerType = isPointerEventType(e, 'down');
			if (_isPointerType && !isPrimaryTouch(e)) return;
			var touch = _isPointerType ? e: e.touches[0];
			//记录开始时的滚动条
			ui.pull.top = $(this).parents('.page')[0].scrollTop;
			//记录开始时的触控点
			ui.pull.startX = touch.pageX;
			ui.pull.startY = touch.pageY;
			//清除记录，防止点击触发
			ui.pull.lastX = -1;
			ui.pull.lastY = -1;
		});
		//touchmove
		$(this).bind('touchmove MSPointerMove pointermove',
		function(e) {
			var _isPointerType = isPointerEventType(e, 'move');
			if (_isPointerType && !isPrimaryTouch(e)) return;
			var firstTouch = _isPointerType ? e: e.touches[0];
			//实时记录触控点
			ui.pull.lastX = firstTouch.pageX;
			ui.pull.lastY = firstTouch.pageY;
			//旋转图标
			$($(this).data('ui-pull' + pullType)).find('.fa').css({
				"transform": "rotate(" + Math.abs(ui.pull.startY - ui.pull.lastY) / 2 + "deg)"
			});
		});
		//touchend
		$(this).bind('touchend MSPointerUp pointerup',
		function(e) {
			var _isPointerType = isPointerEventType(e, 'up');
			if (_isPointerType && !isPrimaryTouch(e)) return;
			var mePullType, top = ui.pull.top,
			touch = _isPointerType ? e: e.touches[0],
			startX = ui.pull.startX,
			startY = ui.pull.startY,
			endX = ui.pull.lastX,
			endY = ui.pull.lastY,
			pull = $(this),
			mepull = $($(this).data('ui-pull' + pullType)),
			option = pull.data('ui-pull' + pullType + 'Option'),
			finish = function() {
				mepull.find('.pullText').html(option.text);
				mepull.find('.loading').removeClass('fa-spin');
			};
			mepull.find('.fa').css({
				"transform": "rotate(0deg)"
			});
			if ((Math.abs(endX - startX) > Math.abs(endY - startY)) || Math.abs(endY - startY) < 60 || (endX === -1 && endY === -1)) { //并非上下滑动或or滑动距离太小or没有move是点击
				return;
			}
			if (Math.abs(top - $(this).parents('.page')[0].scrollTop) < 20) { //非滚动，触发pull
				if (endY < startY) mePullType = 'Up';
				else mePullType = 'Down';
				//判断是否与传入的相同
				if (mePullType == pullType) {
					mepull.find('.pullText').html(option.loadingText);
					mepull.find('.loading').addClass('fa-spin'); //转起来
					option.callback(this, finish);
				}
			}
		});
	}

})(Zepto)